<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性简写</title>
</head>
<body>
  <div id="root">
      <h1 @click="isHot = !isHot">
          {{weather}}
      </h1>
  </div>


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>

    new Vue({
        el:'#root',
        data:{
           isHot:false
        },
        computed:{
           weather(){
               return this.isHot?  '炎热' : '寒冷'
           }
        },

        watch:{
            weather(cur,pre){
                console.log("监听weather",cur,pre)

            }
        }
    })


</script>
</body>
</html>